<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con {
			width: 600px;
			margin: 50px auto 0;
		}

		.inputtxt {
			width: 550px;
			height: 30px;
			border: 1px solid #ccc;
			padding: 0px;
			text-indent: 10px;
		}

		.inputbtn {
			width: 40px;
			height: 32px;
			padding: 0px;
			border: 1px solid #ccc;
		}

		.list {
			margin: 0;
			padding: 0;
			list-style: none;
			margin-top: 20px;
		}

		.list li {
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #ccc;
		}

		.list li span {
			float: left;
		}

		.list li a {
			float: right;
			text-decoration: none;
			margin: 0 10px;
		}
		/*------------------------------------------------------------------------------------*/
	</style>
	<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// 获取增加按钮 设置点击事件
			$("#btn1").click(function () {
				// 获取输入的内容
				var text = $("#txt1").val();
				if (text == "") {
					alert("请输入内容");
					return;
				}
				// 创建一个新的li对象
				var newLi = $('<li><span>' + text + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');

				// 把新的li添加到 列表的最后
				newLi.appendTo($("#list"));
				// 输入框赋值空
				$("#txt1").val("");
			});

			// 用父级列表代理子级a标签点击事件 保证新添加的li的a也有点击功能
			$("#list").delegate("a", "click", function () {
				var className = $(this).prop("class");
				// console.log("className=" + className);
				// 获取点击的a标签所在的li元素
				var thisLi = $(this).parent();
				switch (className) {
					case "up":
						// 向上
						// 获取上面的一个元素
						var prev = thisLi.prev();

						if (prev.length == 0) {
							alert("已经到最顶部了");
							return;
						}

						// 把当前的li移动到上一个元素的上面
						thisLi.insertBefore(prev);

						break;
					case "down":
						// 向下
						// 获取下一个元素
						var next = thisLi.next();
						if (next.length == 0) {
							alert("已经到最底部了");
							return;
						}
						// 把当前的li移动到下一个元素的下面
						thisLi.insertAfter(next);
						break;
					case "del":
						// 删除
						thisLi.remove();
						break;

					default:
						break;
				}

			});


		})
	</script>
</head>

<body>

	<div class="list_con">
		<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">

		<ul id="list" class="list">

			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li>
				<span>学习css</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li>
				<span>学习javascript</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
		</ul>

	</div>




</body>

</html>